<!-- <template>
    <van-cell-group>
        <van-cell title="我的" />
        <van-grid>
            <van-grid-item icon="user-o" text="个人资料" />
            <van-grid-item icon="orders-o" text="我的订单" />
            <van-grid-item icon="balance-list-o" text="账户余额" />
            <van-grid-item icon="setting-o" text="设置" />
        </van-grid>
        <van-button type="success" @click="go">到登录</van-button>
    </van-cell-group>
</template> -->



<template>
  <div class="page-container">
    <van-nav-bar 
      title="我的" 
      fixed 
      placeholder 
      safe-area-inset-top 
    />
    
    <div class="user-info">
      <van-image
        round
        width="70"
        height="70"
        src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg"
      />
      <div class="user-detail">
        <div class="name">茶庄会员</div>
        <div class="level">黄金会员</div>
      </div>
    </div>
    
    <van-grid :column-num="4" :border="false" class="user-grid">
      <van-grid-item icon="pending-payment" text="待付款" />
      <van-grid-item icon="todo-list-o" text="待发货" />
      <van-grid-item icon="logistics" text="待收货" />
      <van-grid-item icon="comment-o" text="评价" />
    </van-grid>
    
    <van-cell-group class="menu-group">
      <van-cell title="我的订单" is-link to="/" />
      <van-cell title="我的收藏" is-link to="/" />
      <van-cell title="收货地址" is-link to="/" />
      <van-cell title="联系客服" is-link to="/" />
    </van-cell-group>
    
    <van-button 
      type="primary" 
      round 
      block 
      class="logout-btn"
      @click="logout"
    >
      退出登录
    </van-button>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

const logout = () => {
  router.push('/login')
}
</script>

<style scoped>
.page-container {
  padding-bottom: 50px;
}

.user-info {
  display: flex;
  align-items: center;
  padding: 20px;
  background: linear-gradient(to right, #ffd01e, #ff6034);
  color: #fff;
}

.user-detail {
  margin-left: 15px;
}

.user-detail .name {
  font-size: 18px;
  font-weight: bold;
}

.user-detail .level {
  font-size: 14px;
  margin-top: 5px;
  background: rgba(255,255,255,0.3);
  padding: 2px 10px;
  border-radius: 10px;
  display: inline-block;
}

.user-grid {
  margin: 15px 0;
  background: #fff;
}

.menu-group {
  margin: 15px 0;
}

.logout-btn {
  width: 90%;
  margin: 30px auto 0;
}
</style>